![flutter doctorでVSCodeのExtensionが認識されない問題を調査してみた](https://devio2023-media.developers.io/wp-content/uploads/2018/08/flutter-logo-400x400.png)
flutter doctorでVSCodeのExtensionが認識されない問題を調査してみた
大阪オフィスの山田です。Macのトラックパッドをずっと触っているとなんか滑りが悪くなってきます。今回は今までずっと抱えてた「flutter doctorしてもVSCodeのExtensionを認識してくれない問題」を調査したので、その過程と結果をご報告します。少しだけマニアックです。
事の発端
今までいくつかFlutterの記事を書いていて、毎回開発環境を示すためにflutter doctor
の結果を記載していました。
Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK 28.0.1) [✓] iOS toolchain - develop for iOS devices (Xcode 9.4) [✓] Android Studio (version 3.1) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] VS Code (version 1.26.1) [✓] Connected devices (1 available)
flutter doctor -v
をして詳細を出します。
[!] VS Code (version 1.26.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension not installed; install from https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
私はVSCodeを使用して開発しているので、当然Extensionがインストールされています。なのにびっくりマークが付きます。なぁぜぇ。。。
結果
まあ、まず疑うのはFlutterのバージョン
か、VSCodeのバージョン
かなぁと思います。VSCodeは最新を使用しています。Flutterはv0.5.1
ですね。。。で、楽しくはないんですが結論から言ってしまうと、Flutterのバージョン
が原因でした。最新のバージョンでは直っています。
原因調査
「バージョンを上げたら直りました。」もいいのですが、好きでFlutter触っているわけですし、じゃあ具体的にどこがどうなって解消されたん?という点が気になったので調査しました。Flutterのソースコードを追います。
ソースを取得する
GitHub - flutter/flutterで公開されています。別にengine
というリポジトリもあるのですが、こちらはもっとコアな部分を司っているようです。詳しい線引きはまだ整理できていませんので今回は触れません。GitHub - flutter/flutterからcloneしてきます。
git clone git@github.com:flutter/flutter.git
2018/08/28 19:00現在、リリースタグを見るとv0.7.2
となってますね。v0.6.0
からv0.7.0
の間、めっちゃリリース間隔短くない?
探して、動かす
flutter doctor
で、VSCodeを見て動くソースはどこらへんかなぁとGrepして見ます。
flutter/packages/flutter_tools/lib/src/vscode/
ここの中にVSCodeの記述が。これっぽい。ん。。。ソースを落としてきたものの、これどうやって動かすんだ?? flutter/packages/flutter_tools/
のREADME.mdを見ると../../bin/cache/dart-sdk/bin/pub run test -j1
これでtestが走るよ、と書いてあります。実行すると、そんなファイルは無い
と怒られます。えぇ。。。
探して、動かす(その2)
CONTRIBUTINGにヒントがありました。
The flutter tool itself is built when you run flutter for the first time and each time you run flutter upgrade.
あ、flutterコマンドを一回、走らせないとダメなのね。自動生成されるのかな。
Add this repository's bin directory to your path. That will let you use the flutter command in this directory more easily.
落としてきたソースのbinディレクトリにパスを通します。~/.bash_profile
にパスを記載してsource ~/.bash_profile
します。そしてflutter doctor
。そうすると先ほどのtestを走らせるコマンドが実行できるようになります。
ソースを見る
全部は追いきれないので今回はVSCodeのExtensionチェックのところだけ。 VsCodeクラスのコンストラクタで以下のような処理を行なっています。ソースコードはこちら
- extensionディレクトリがそもそも存在するかチェック - `Dart-Code.flutter`をlower-caseに変換 - extensionディレクトリの中をlower-caseに変換しながら検索する - extensionディレクトリが見つかったらvalidationMessageにバージョンを記載し、validate完了とする
んーなるほどこういう流れなのね。ちなみにこのクラスにはVSCodeのインストールディレクトリを定義して返却する_installedMacOS
メソッドもあります。
いつ直ったのかを調査する
git log packages/flutter_tools/lib/src/vscode/
でそれっぽいログを探します。それっぽいものが見つかりました。このコミットですね。コミットメッセージを意訳します。間違っていたらごめんなさい。
VSCodeは最近、extensionのフォルダにlower-caseを使うようになった。(私たちは`Dart-Code.flutter`と定義しているが、`dart-code.flutter`となる。)なので、Casingを厳密にチェックしないようにした
見ると、toLowerCaseの処理が追加されています。日付を見ると2018/06/18になっていますね。これだ!!
そして最新版のFlutterでdoctorする
[✓] Flutter (Channel master, v0.7.3-pre.24, on Mac OS X 10.13.5 17F77, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK 28.0.1) [✓] iOS toolchain - develop for iOS devices (Xcode 9.4) [✓] Android Studio (version 3.1) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [✓] VS Code (version 1.26.1) [!] Connected devices ! No devices available
VS Codeのびっくりマークは解消されています。Connected devicesについては、端末を接続したら解消するので触れません。
最後に
いかがだったでしょうか。Flutterを使って実装するのも楽しいですが、Flutter自身のソースを見てみるのも面白いものです。時々追ってみようかなと思います。